<template>
  <view class="p-20">
    <view class="my-card">
      <u-form ref="formRef" :model="form">
        <u-form-item label="姓名" prop="name" required>
          <u-input v-model="form.name" placeholder="请输入姓名"></u-input>
        </u-form-item>
        <u-form-item label="手机号" prop="phone" required>
          <u-input v-model="form.phone" placeholder="请输入手机号"></u-input>
        </u-form-item>
        <u-form-item label="工作类型" prop="type" required @tap="showType = true">
          <u-input v-model="typeLabel" readonly placeholder="请选择工作类型" border="none">
            <template #suffix>
              <u-icon name="arrow-right"></u-icon>
            </template>
          </u-input>
        </u-form-item>
        <u-form-item label="身份证正面" prop="idcard_1_url" required>
          <my-upload v-model="fileList1" :maxCount="1" @upload="handleUpload1" @delete="handleDelete1"></my-upload>
        </u-form-item>
        <u-form-item label="身份证反面" prop="idcard_2_url" required>
          <my-upload v-model="fileList2" :maxCount="1" @upload="handleUpload2" @delete="handleDelete2"></my-upload>
        </u-form-item>
        <u-form-item label="手持身份证图片" prop="idcard_hand_url" required>
          <my-upload v-model="fileList3" :maxCount="1" @upload="handleUpload3" @delete="handleDelete3"></my-upload>
        </u-form-item>
        <u-form-item label="人脸图片" prop="idcard_hand_url" required>
          <my-upload v-model="fileList4" :maxCount="1" @upload="handleUpload4" @delete="handleDelete4"></my-upload>
        </u-form-item>
      </u-form>
    </view>
    <view class="mt-20">
      <u-button type="primary" @tap="handleSubmit">提交</u-button>
    </view>
    <u-picker :show="showType" :columns="columns" @confirm="handleTypeConfirm" @cancel="showType = false"></u-picker>
  </view>
</template>

<script setup>
  import { onReady } from "@dcloudio/uni-app";
  import { reactive, ref } from "vue";
  import { useUserStore } from "@/store/user";

  const userStore = useUserStore();

  const formRef = ref();

  const fileList1 = ref([]);

  const fileList2 = ref([]);

  const fileList3 = ref([]);

  const fileList4 = ref([]);

  const showType = ref(false);

  const columns = [["兼职", "全职"]];

  const form = reactive({
    // 姓名
    name: "",
    // 电话号码
    phone: "",
    // 身份证正面图片地址
    idcard_1_url: "",
    // 身份证反面图片地址
    idcard_2_url: "",
    // 手持身份证图片地址
    idcard_hand_url: "",
    // 人脸图片地址，用户骑手头像
    face_url: "",
    // 类型，【parttime】兼职，【fulltime】全职
    type: "",
  });

  // 工作类型反显
  const typeLabel = ref("");

  // 表单规则
  const rules = {
    name: [{ required: true, message: "请输入姓名", trigger: ["blur"] }],
    phone: [
      { required: true, message: "请输入手机号", trigger: ["blur"] },
      {
        pattern: /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/,
        message: "手机号格式不正确",
        trigger: ["blur"],
      },
    ],
    idcard_1_url: [{ required: true, message: "请上传身份证正面", trigger: ["change"] }],
    idcard_2_url: [{ required: true, message: "请上传身份证反面", trigger: ["change"] }],
    idcard_hand_url: [{ required: true, message: "请上传手持身份证图片", trigger: ["change"] }],
    face_url: [{ required: true, message: "请上传人类图片", trigger: ["change"] }],
    type: [{ required: true, message: "请选择工作类型", trigger: ["change"] }],
  };

  // 工作类型确认事件
  function handleTypeConfirm(e) {
    if (e.indexs[0] == 0) {
      form.type = "parttime";
      typeLabel.value = "兼职";
    } else if (e.indexs[0] == 1) {
      form.type = "fulltime";
      typeLabel.value = "全职";
    }
    showType.value = false;
    console.log(form);
  }

  // 身份证正面上传
  function handleUpload1(e) {
    form.idcard_1_url = e;
  }

  // 身份证正面删除
  function handleDelete1() {
    form.idcard_1_url = "";
  }

  // 身份证反面上传
  function handleUpload2(e) {
    form.idcard_2_url = e;
  }

  // 身份证反面删除
  function handleDelete2() {
    form.idcard_2_url = "";
  }

  // 手持身份证照片上传
  function handleUpload3(e) {
    form.idcard_hand_url = e;
  }

  // 手持身份证照片删除
  function handleDelete3() {
    form.idcard_hand_url = "";
  }
  // 人脸照片上传
  function handleUpload4(e) {
    form.face_url = e;
  }
  // 人脸照片删除
  function handleDelete4() {
    form.face_url = "";
  }

  async function handleSubmit() {
		// 校验表单
    const valid = await formRef.value.validate();
    if (valid) {
			// 发送接口
      const result = await userStore.fetchApplyRider(form);
      if (result) {
        uni.$u.toast("申请成功");
        uni.navigateBack();
      }
    }
  }

  onReady(() => {
    formRef.value.setRules(rules);
  });
</script>

<style lang="scss" scoped></style>
